<template>
  <!-- 大屏三,第三列下面 -->
  <el-row ref="radarWrap" class="rightWrap">
    <el-row>
      <el-row class="onlineTitle">{{ $store.getters.getLocation }}质差用户最多的终端型号</el-row>
      <el-row class="onlineNum">
        {{ vendor }}
      </el-row>
    </el-row>
    <BarCharts style="height:calc(100% - 82px)"
      :chartData="chartDataTop"
      :barColor="'rgba(177,237,80,.7)'"
    />
  </el-row>
</template>

<script>
import BarCharts from '@c/BarCharts'
  export default {
    name: "ThreeRightOneBottom",
    components: {
      BarCharts
    },
    props: {
      vendor: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        chartDataTop:{
          dataLine: [89,20,30,40,50,10,10,15,98,34,12,99],
          dataY: [1,2,3,4,5,6,7,8,9,10,11,12]
        },
        headerList: ['省份','纳管量','在线量','在线比','离线量'],
        dataList: [
          ['北京',100, 200, '98.7%', '23%'],
          ['北京',100, 200, '98.7%', '23%'],
          ['北京',100, 200, '98.7%', '23%']
        ],
        chartName: [],
        total: '',
        online: '',
        radarWidth: '',
        radarHeight: ''
      }
    },
    created() {
      this.$bus.$off('provinceChanged')
      this.$bus.$on('provinceChanged', this.getProbes)
    },
    mounted() {
      this.getWidthAndHeight()
    },
    methods: {
      getWidthAndHeight() {
        const width =  this.$refs.radarWrap.$el.offsetWidth
        this.radarHeight =  this.$refs.radarWrap.$el.offsetHeight - 200 + 'px'
      },
      getProbes(code){
        window._api.apiProbes({ code }).then(res => {
          if (res.state === 'ok') {
            this.total = res.total
            this.online = res.online
            let keys = Object.keys(res.types)
            this.chartData = []
            this.chartName = []
            keys.map(item => {
              this.chartName.push(item)
              this.chartData.push(res.types[item])
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.rightWrap{
  height: 17vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.onlineTitle{
  height: 20px;
  line-height: 20px;
  text-align: left;
  font-size: 16px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(243, 123, 29);
  /*background-image: linear-gradient(to bottom, rgba(14,101,187, 0.8) 0%, rgba(0,0,0,0) 35%,rgba(0, 0, 0, 0) 65%, rgba(14,101,187, 0.8) 100%);*/
}
.onlineNum{
  height: 60px;
  line-height: 50px;
  text-align: left;
  font-size: 30px;
  color: rgb(66, 165, 233);
}
</style>

